<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>DOMElement Test | TM Lib</title>
        
        <style>
            body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; }
            
            #content {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            
            #content>* {
                padding: 10px 20px;
                width: 50%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            .box {
                margin-top: 5px;
                margin-bottom: 5px;
                padding: 10px;
                border: 1px solid black;
            }
            
            #target {
            }
            .append-element {
                border: 2px solid hsl(0, 50%, 50%);
            }
            .prepend-element {
                border: 2px solid hsl(90, 50%, 50%);
            }
            .after-element {
                border: 2px solid hsl(180, 50%, 50%);
            }
            .before-element {
                border: 2px solid hsl(270, 50%, 50%);
            }
            
            .absolute {
                background : white;
                color: black;
            }
            
            .fixed {
                background : black;
                color: white;
            }
            
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script id="test-script">
            
            TM.loadScript("dom", "dom");
            
            /*
             * Test
             */
            TM.main(function()
            {
                var eTarget = TM.$DOMElement( "#target" );
                // append test 
                var eAppend = TM.$DOMElement( TM.$create("div") );
                eAppend.html = "append element";
                eAppend.element.setAttribute("class", "box append-element");
                eTarget.append(eAppend);
                // prepend test
                var ePrepend = TM.$DOMElement( TM.$create("div") );
                ePrepend.html = "prepend element";
                ePrepend.element.setAttribute("class", "box prepend-element");
                eTarget.prepend(ePrepend);
                // after test
                var eAfter = TM.$DOMElement( TM.$create("div") );
                eAfter.html = "after element";
                eAfter.element.setAttribute("class", "box after-element");
                eTarget.after(eAfter);
                // before test
                var eBefore = TM.$DOMElement( TM.$create("div") );
                eBefore.html = "before element";
                eBefore.element.setAttribute("class", "box before-element");
                eTarget.before(eBefore);
                
                // create and append test
                var eCreate = eTarget.$create("div");
                eCreate.html = "create and append element";
                eCreate.element.setAttribute("class", "box append-element");
                // create and before test
                var eCreatePrepend = eTarget.$create("div", "prepend");
                eCreatePrepend.html = "create and prepend element";
                eCreatePrepend.element.setAttribute("class", "box prepend-element");
                
                // コンソール生成
                var c = TM.DebugConsole("#console");
                
                // query test
                c.group("query test");
                c.log( eTarget.$query(".append-element").html );
                c.log( eTarget.$query(".append-element", 1).html );
                c.log( eTarget.$query(".prepend-element").html );
                c.log( eTarget.$query(".prepend-element", 1).html );
                c.groupEnd();
                
                // 
                c.group("queryAll test");
                var boxList = TM.$DOMElement(document).$queryAll(".box");
                for (var i=0,len=boxList.length; i<len; ++i) {
                    c.log(i + ": " + boxList[i].text);
                }
                c.groupEnd();
                
                
                // 
                c.group("field test(absolute)");
                var eAbsolute = TM.$DOMElement(".absolute");
                eAbsolute.absolute(window.innerWidth - 350, 200, 100, 100);
                c.log("html     : ", eAbsolute.html);
                c.log("text     : ", eAbsolute.text);
                c.log("value    : ", eAbsolute.value);
                c.log("x        : ", eAbsolute.x);
                c.log("y        : ", eAbsolute.y);
                c.log("width    : ", eAbsolute.width);
                c.log("height   : ", eAbsolute.height);
                // しれっとフルスクリーン登録
                eAbsolute.element.onclick = function() {
                    eAbsolute.fullScreen();
                };
                c.groupEnd();
                
                
                // 
                c.group("field test(fixed)");
                var eFixed = TM.$DOMElement(".fixed");
                eFixed.fixed(window.innerWidth - 200, 200, 100, 100);
                c.log("html     : ", eFixed.html);
                c.log("text     : ", eFixed.text);
                c.log("value    : ", eFixed.value);
                c.log("x        : ", eFixed.x);
                c.log("y        : ", eFixed.y);
                c.log("width    : ", eFixed.width);
                c.log("height   : ", eFixed.height);
                // しれっとフルスクリーン登録
                eFixed.element.onclick = function() {
                    eFixed.fullScreen();
                }
                c.groupEnd();
                
                var time = 0;
                TM.setLoop(function(){
                    time += 1;
                    // css プロパティを数値っぽく扱えるのでこんなことができちゃいます!!
                    eAbsolute.height    += Math.cos(time*Math.PI/180);
                    eFixed.y            += Math.cos(time*Math.PI/180);
                }, 1000/30);
            });
            
        </script>
        
        <script>
            TM.addNamespace("prettify", "./../../plugins/prettify");
            TM.loadPrettify();
            
            TM.main(function(){
                TM.$id("code").innerText = TM.$id("test-script").innerText;
                prettyPrint();
            });
        </script>
    </head>
    
    <body>
         
        <h1>DOMElement Test | TM Lib</h1>
        
        <div id="content">
            <section>
                <h2>DOMElement Test</h2>
                <section>
                    <div id="target" class="box">
                        Target
                        <div class="box">Dummy00</div>
                        <div class="box">Dummy01</div>
                        <div class="box">Dummy02</div>
                    </div>
                </section>
                <section>
                    <div class="absolute box">absolute box</div>
                </section>
                <section>
                    <div class="fixed box">fixed box</div>
                </section>
                <h2>Console</h2>
                <pre id="console" class="prettyprint"></pre>
            </section>
            <section>
                <h2>Code</h2>
                <pre id="code" class="prettyprint"></pre>
            </section>
        </div>
        
        
    </body>
</html>
